<template>
  <div class="wrapper" @mousemove="mousemoveStorage">
    <v-head :routhData="routhData" :itemSetTime="itemSetTime" :bannerSettime='bannerSettime' @resetDDWVIP="resetDDWVIP"></v-head>
    <v-sidebar :routhData="routhData"></v-sidebar>


    
    <!-- 充值详情 -->
    <el-dialog title="充值详情" :visible.sync="editVisible" width="30%" :close-on-click-modal="false">
      <el-form ref="formName" :model="ruleForm" label-width="120px" :rules="resetRule">
        <!-- <el-form-item label="座席数">
          <el-input type="number" v-model="ruleForm.personNum" placeholder="请输入"></el-input>
        </el-form-item> -->
        <el-form-item label="续费时长/年" prop="resetYear">
          <el-select v-model="ruleForm.resetYear" filterable placeholder="请选择">
            <el-option
              v-for="item in 5"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="支付方式" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio :label="1">
              <img src="@/assets/img/wechat.png" alt="" style="width: 20px; height: 20px; position: absolute; top: -3px;">
            </el-radio>
            <el-radio :label="2">
              <img src="@/assets/img/Alipay.png" alt="" style="width: 20px; height: 20px; position: absolute; top: -3px;">
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="有效期：">
          {{ validTimeStorge }}
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeEditVisible">取 消</el-button>
        <el-button type="primary" @click="saveEditAdd()">确 定</el-button>
      </span>
    </el-dialog>

    
    <el-dialog :title='resetSystem' :visible.sync="isShowCode" width="30%" :close-on-click-modal="false">
      <div class="resetBox">
        <div style="font-size: 18px; font-weight: 500;">订单总金额：</div>
        <div>
          <el-image 
            style="width: 200px; 
            height: 200px"
            :src="codeIMGURL" fit="fill">
          </el-image>
        </div>
        
        <div @click="againGetPayCode" style="font-size: 12px; color: #3948ec; margin: 0 0 10px 0; cursor:pointer;">点击刷新二维码</div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="resetSuccess()">支付完成</el-button>
        </span>
      </div>
    </el-dialog>


    
    <div class="content-box" :class="{'content-collapse':collapse}">
      <div style="position: relative;">
        <el-carousel v-if="bannerList.length != 0" class="carousel" height="30px" direction="horizontal" indicator-position="none">
          <el-carousel-item v-for="item in bannerList">
            <p class="medium">！！！ {{item.csStatus == '7'?'签约':item.csStatus == '8'?'进件':'成交'}}喜报 >>> {{item.userName}} 客户 {{item.cusName}} 成功<span
                    class="fontB">{{item.csStatus == '7'?'签约':item.csStatus == '8'?'进件':'下款'}}</span>，金额 <span
                    class="fontRed">{{item.csStatus == '7'?item.applyAmount:item.csStatus == '8'?item.intoAmount:item.loanAmount}}</span> ！！ 费率 <span
                    class="fontRed">{{item.rate}}</span> ！！！</p>
          </el-carousel-item>
        </el-carousel>
        <p class="carouselMod"></p>
      </div>
      <div class="content">
        <transition name="move" mode="out-in">
          <keep-alive :include="tagsList">
            <router-view :routhData="routhData"></router-view>
          </keep-alive>
        </transition>
        <el-backtop target=".content"></el-backtop>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode'
import { parseTime } from '@/utils/setTime';
import { Loading } from 'element-ui';
import vHead from './Header.vue';
import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue';
import bus from './bus';
import Storage from '../../utils/localStorage';
import TelSDKURL from '../../utils/tccc';
import { getRouth, setintervalTixing, SAABanner,paySysRecharge,getVisitLunxu } from '../../api/index';
export default {
  data() {
    return {
      codeIMGURL:'',
      ruleForm: {
        personNum: null,
        resetYear: '',
        resource:'',
      },
      resetRule: {
        resetYear: [
          { required: true, message: '请选择续费时长', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择支付方式', trigger: 'change' }
        ]
      },
      isShowCode: false,
      editVisible: false,
      tagsList: [],
      collapse: false,
      routhData: "",
      itemSetTime: '',
      bannerList: [],
      bannerSettime: '',
      validTimeStorge: ''
    };
  },
  components: {
    vHead,
    vSidebar,
    vTags
  },
  computed:{
    resetSystem(){
      if (this.ruleForm.resource == 1) {
        return '微信充值'
      } else {
        return '支付宝充值'
      }
    }
  },
  created() {
    bus.$on('collapse-content', msg => {
      this.collapse = msg;
    });

    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
    bus.$on('tags', msg => {
      let arr = [];
      for (let i = 0, len = msg.length; i < len; i++) {
        msg[i].name && arr.push(msg[i].name);
      }
      this.tagsList = arr;
    });

    this.getRouthdata();
    this.getSAAbanner();
    this.setintervalSAAFun();
    // this.setintervalTixingFun();
    setintervalTixing().then((res) => {
      if (res.code === 0) {
        if (res.customers.length > 0) {
          res.customers.forEach((item, i) => {
            this.$notify({
              title: '需要处理的工作',
              message: '客户名称：' + item.cName + ' 电话：' + item.cPhone + ' 备注：' + item.cNextRemarks,
              position: 'bottom-right',
              duration: 0
            });
          })
        }
      } else {
        this.$message(res.msg);
      }
    });
  },
  methods: {
    getTimeAndNumFir(){
      getVisitLunxu().then(res => {
        this.validTimeStorge = parseTime(res.time,'{y}-{m}-{d}')
        Storage.setItem({
          name: "validTimeStorge",
          value: parseTime(res.time,'{y}-{m}-{d}')
        })
      })
    },
    againGetPayCode(){
      Loading.service();
      let loadingInstance = Loading.service();
      const obj = {
        years: this.ruleForm.resetYear,
        type: this.ruleForm.resource
      }
      paySysRecharge(obj).then(res => {
        if (res.code === 0) {
          let opts = {
            errorCorrectionLevel: "L",//容错级别
            type: "image/png",//生成的二维码类型
            quality: 0.3,//二维码质量
            margin: 3,//二维码留白边距
            width: 200,//宽
            height: 200,//高
            text: res.qrCode,//二维码内容
            color: {
                  dark: "#000",//前景色
                  light: "#fff"//背景色
            }
        };
          QRCode.toDataURL(res.qrCode,opts, (err, url) => {
            if (err) {
              throw err
            } else {
              this.isShowCode = true
              this.codeIMGURL= url
              this.editVisible = false
              loadingInstance.close();
            }
          })
          
        }
      })
    },
    closeEditVisible(){
      this.ruleForm = {
        // personNum: null,
        resetYear: '',
        resource:'',
      }
      this.editVisible = false
    },
    resetSuccess(){
      this.isShowCode = false
    },
    saveEditAdd(){
      this.$refs.formName.validate((valid) => {
        if (valid) {
          Loading.service();
          let loadingInstance = Loading.service();
          const obj = {
            years: this.ruleForm.resetYear,
            type: this.ruleForm.resource
          }
          paySysRecharge(obj).then(res => {
            if (res.code === 0) {
              let opts = {
                errorCorrectionLevel: "L",//容错级别
                type: "image/png",//生成的二维码类型
                quality: 0.3,//二维码质量
                margin: 3,//二维码留白边距
                width: 200,//宽
                height: 200,//高
                text: res.qrCode,//二维码内容
                color: {
                      dark: "#000",//前景色
                      light: "#fff"//背景色
                }
            };
              QRCode.toDataURL(res.qrCode,opts, (err, url) => {
                if (err) {
                  throw err
                } else {
                  this.isShowCode = true
                  this.codeIMGURL= url
                  this.editVisible = false
                  loadingInstance.close();
                }
              })
              
            }
          })
        }
      })
    },
    resetDDWVIP(){
      this.editVisible = true
    },
    //登陆超时需要重新登陆
    mousemoveStorage(e) {
      let msg;
      if (Storage.getItem("username")) {
        Storage.setItem({
          name: "username",
          expires: 7200000,
          value: Storage.getItem("username")
        })
        Storage.setItem({
          name: "token",
          expires: 7200000,
          value: Storage.getItem("token")
        })
        Storage.setItem({
          name: "ddwuserData",
          expires: 7200000,
          value: Storage.getItem("ddwuserData")
        })
      } else {
        msg = this.$message({
          type: "error",
          message: "长时间未操作,请重新登陆",
          duration: 2000,
          onClose: () => {
            clearInterval(this.itemSetTime);
            clearInterval(this.bannerSettime);
            this.$router.push('/login');
          }
        });
        msg.close();
      }
    },
    //获取路由
    getRouthdata() {
      getRouth().then((res) => {
        if (res.code === 0) {
          let arr = [];
          res.menus.forEach((item, i) => {
            if (item.childMenus.length > 0) {
              arr.push(item);
            }
          })
          this.routhData = arr;
        }
      });
    },
    //获取签单轮播图
    getSAAbanner() {
      SAABanner().then(res => {
        if (res.code == 0) {
          this.bannerList = res.list;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //轮询签单提醒
    setintervalSAAFun() {
      this.bannerSettime = setInterval(() => {
        if (Storage.getItem("username")) {
          this.getSAAbanner();
        } else {
          clearInterval(this.bannerSettime);
          this.$router.push('/login');
        }
      }, 60000);
    },
    //轮询查询提醒
    setintervalTixingFun() {
      this.itemSetTime = setInterval(() => {
        if (Storage.getItem("username")) {
          this.setTimeAjax();
        } else {
          clearInterval(this.itemSetTime);
          this.$router.push('/login');
        }
      }, 60000);
    },
    setTimeAjax() {
      setintervalTixing().then((res) => {
        if (res.code === 0) {
          if (res.customers.length > 0) {
            res.customers.forEach((item, i) => {
              this.$notify({
                title: '需要处理的工作',
                message: '客户名称：' + item.cName + ' 电话：' + item.cPhone + ' 备注：' + item.cNextRemarks,
                position: 'bottom-right',
                duration: 0
              });
            })
          }
        } else {
          this.$message(res.msg);
        }
      });
    }
  },
  mounted() {
    this.getTimeAndNumFir()
    if (Storage.getItem("ddwuserData") && JSON.parse(Storage.getItem("ddwuserData")).extParam5 && JSON.parse(Storage.getItem("ddwuserData")).extParam2 == '1') {
      TelSDKURL();
    }
  },
};
</script>
<style scoped>

/deep/ .el-dialog__body {
  padding: 10px 20px;
}
.resetBox {
  width: 100%;
  text-align: center
}
.carousel {
    background: #e6a23c;
}
.medium {
    color: #fff;
    line-height: 30px;
    padding: 0 20px;
    font-size: 14px;
    text-align: center;
}
.carouselMod {
    position: absolute;
    top: 0;
    height: 30px;
    width: 100%;
    left: 0;
    z-index: 99;
}
.fontRed {
    color: red;
    font-size: 16px;
    font-weight: bold;
}
.fontB {
    color: green;
    font-weight: bold;
}
</style>
